<template> 
  <div class="base-header">
    <div class="left" :style="style1"   v-if="!isConfirm" @click="$router.back()"></div>
    <div class="left" :style="style1" v-if="isConfirm" @click="confirm"></div>
    <div class="center" v-if="!isConfirms">{{text}}</div>
    <div class="center" v-if="isConfirms" @click="confirms">{{text}}</div>
    <slot>
      <div class="right" v-if="isConfirm1" @click = "shutdown"></div>
    </slot>
    <base-dialog :dialogHeight="115" :showDialog="showDialog" @maskClick="maskClick" @cancel="cancel" @dialogConfirm="dialogConfirm">
      <div style="color:black">返回将不保存当前正在创建的遥控器，确定返回吗？</div>
    </base-dialog>
    <ModifyDialog :showModify="showModify" @modifyClick="modifyClick" @cancelModify="cancelModify" @dialogConfirmModify="dialogConfirmModify" >
      <div style="color:black">修改名称</div>
    </ModifyDialog>
  </div>
</template>
<script>
  import BaseDialog from "./BaseDialog.vue";
  import ModifyDialog from "./ModifyDialog.vue";


  export default {
    components: {BaseDialog,ModifyDialog},
    
    name: 'BaseHeader',
    data() {
      return {
        style1:{
          backgroundImage: 'url(' + require('../assets/back.png') + ')'
        },
        showDialog: false,
        showModify:false,

      }
    },
    props:{
      text:{
        type: String,
        default() {
          return ''
        }
      },
      isConfirm:{
        type: Boolean,
        default() {
          return false
        }
      },
      isConfirms:{
        type: Boolean,
        default() {
          return false
        }
      },
      isConfirm1:{
        type: Boolean,
        default() {
          return false
        }
      },

    },
    methods:{
      confirm(){
        this.showDialog = true
      },
      confirms(){
        this.showModify = true
      },

      maskClick(){
        this.showDialog = false
      },
      modifyClick(){
        this.showModify = true
      },
      cancel(){
        this.showDialog = false
      },
      dialogConfirm(){
        this.showModify = false
      },
      cancelModify(){
        this.showModify = false
      },
      dialogConfirmModify(){
        this.$emit("dialogConfirmModify")
      },
      dialogConfirm(){
        this.$router.back()
      },
      shutdown(){
        
      }
    }
  }
</script>
<style scoped>
  .base-header{
    height: 0.67rem;
    padding: 1.06rem 0.4rem 0.5rem 0.3rem;
    /* display: block; */
    display: flex;
    /* justify-content: space-between; */
    /* background-color: rgba(255,255,255,0.1); */
    background-color: #42afb6;
    color: #ffffff;
    font-size: 0.55rem;
    background: url(../assets/changxixian.png) no-repeat 0 2.2rem;
    background-size:100% 1px ;
    
  }
  .left{
    text-align: left;
    width: 0.5rem;
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center center;
    /* float: left; */
    
  }
  .center{
    text-align: center;
    width: 5rem;
    margin: 0 1rem 0 1.9rem ;
    /* margin-left: 3.77rem;
    float: left; */
  }
  .right{
    text-align: right;
    width: 1.4rem;
    background: url('../assets/kaiji.png')no-repeat;
    background-size: 100% 100%;
    /* margin-left: 3rem;
    float: left; */
  }
</style>
